import React from 'react';
import { history } from 'umi';
import { Descriptions, Typography } from '@douyinfe/semi-ui';
import { IconList, IconPriceTag } from '@douyinfe/semi-icons';
import adminStyle from './index.less';

const { Text } = Typography;
export default class Admin extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      userName: '阿贤',
      data: [
        { key: '网站访问数量', value: '1,480,000' },
        { key: '书签总数', value: '1,480,000' },
        { key: '用户总数', value: '1,480,000' },
      ],
      feature: [
        {
          name: '分类管理',
          path: '/admin/classify',
          icon: <IconPriceTag style={{ fontSize: '1.5rem' }} />,
        },
        {
          name: '书签列表',
          path: '/admin/bookmark',
          icon: <IconList style={{ fontSize: '1.5rem' }} />,
        },
      ],
    };
  }

  goFeature(item: any) {
    // const { user, signin } = useModel('updateNav');
    history.push(item.path);
    this.forceUpdate();
  }

  render() {
    const style = {
      backgroundColor: 'var(--semi-color-bg-2)',
      borderRadius: '4px',
      padding: '10px',
      marginRight: '20px',
      width: '700px',
    };
    const { userName, data, feature }: any = this.state;
    return (
      <div
        className={[adminStyle.admin_container, 'content_container'].join(' ')}
      >
        <div className={adminStyle.welcome}>Hi~ ,{userName}</div>
        <Descriptions size="large" data={data} row style={style} />
        <h2 className={adminStyle.title}>功能模块</h2>
        <div className={adminStyle.feature_container}>
          {feature.map((item: any, index: number) => (
            <div
              onClick={() => {
                this.goFeature(item);
              }}
              className={adminStyle.feature_item}
              key={index}
            >
              <div className={adminStyle.icon_style}> {item.icon}</div>
              <div className={adminStyle.feature_title}>{item.name}</div>
            </div>
          ))}
        </div>
        <h1
          style={{
            fontSize: '2rem',
            position: 'absolute',
            bottom: '2rem',
            right: '2rem',
          }}
        >
          化繁为简，简而不凡
        </h1>
        {/*<CardGroup spacing={10}>*/}
        {/*  {*/}
        {/*    new Array(8).fill(null).map((v,idx)=>(*/}
        {/*      <Card*/}
        {/*        key={idx}*/}
        {/*        shadows='hover'*/}
        {/*        title='Card title'*/}
        {/*        headerLine={false}*/}
        {/*        style={{ width:260 }}*/}
        {/*        headerExtraContent={*/}
        {/*          <Text link>*/}
        {/*            More*/}
        {/*          </Text>*/}
        {/*        }*/}
        {/*      >*/}
        {/*        <Text>Card content</Text>*/}
        {/*      </Card>*/}
        {/*    ))*/}
        {/*  }*/}
        {/*</CardGroup>*/}
      </div>
    );
  }
}
